<template>
  <el-table
    :data="users"
    style="width: 100%">
    <el-table-column
      label="用户ID"
      prop="id"
      align="center"
      width="180"/>
    <el-table-column
      label="姓名"
      prop="name"
      align="center"/>
    <el-table-column
      label="昵称"
      prop="nickName"
      align="center"/>
    <el-table-column
      label="手机号"
      prop="mobile"
      align="center"/>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
    export default {
      // data(){
      //   return {
      //     users:[]
      //   }
      // },
      // 服务端渲染-同步方式
      async asyncData({ $axios }) {

        // 1. 查询出所有用户列表
        const data = await $axios.$get("/api/core/userInfo/list?xxl_sso_sessionid=U002_b71c48d26e904d9ea723331bd6f05926")
        
        console.log(data);
        
        const users = data.list
        return {
          users,
        }
      },
      // 客户端渲染方式-同步方式
      created() {
        // this.findAllUsers()
      },
      methods:{
        // async findAllUsers(){
        //  let data = await this.$axios.$get("/api/core/userInfo/list?xxl_sso_sessionid=U002_b71c48d26e904d9ea723331bd6f05926")
        //  console.log(data);
         
        //   this.users = data.list
        // },
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      }
    }
</script>

<style scoped>

</style>
